<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信用卡界面</title>
    <script src="../../static/js/jquery-1.11.0.js"></script>
    <style>

        #d1 {
            width: 480px;
            height: 86vh;
            position: absolute;
            margin-top: 2vh;
            /*margin-left: 400px;*/
            right: 500px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            text-align: center;
            /**/
            /*    内容超出时，打开滚动条*/
            overflow: auto;
        }

        .h1 {
            margin-top: 10px;
        }

        .d1 {
            /*border: 1px solid red;*/
            width: 100%;
            /*!*    内容超出时，打开滚动条*!*/
            /*    overflow: auto;*/

        }

        .prod {
            margin-top: 10px;
            width: 94%;
            margin-left: 3%;
            height: 200px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        .prod > h2 {
            margin-top: 20px;
        }

        .b {
            width: 200px;
            height: 40px;
            border-radius: 5px;
            background-color: mediumseagreen;
            margin-top: 10px;
        }

        .v > input[type=text] {
            width: 240px;
            height: 40px;
            margin-top: 20px;
            padding-left: 20px;
        }

        .v > input[type=button] {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            background-color: mediumseagreen;
            margin-top: 50px;
        }

        .prod > input[type=button] {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            background-color: mediumseagreen;
            margin-top: 10px;
        }
        .v > select {
            width: 260px;
            height: 40px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .d{
            display: none;
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0vh;
            left: 0vh;
            background: rgba(48,48,48,0.7);
        }
        .v{
            width:500px;
            height:600px;
            display: block;
            position: absolute;
            background-color: rgba(255,255,255,1);
            left: 70vh;
            top: 10vh;
            text-align: center
        }

        .hint{
            color: red;
        }
    </style>
    <script>
        $(function (){
            //焦点事件
            //手机号判断
            $("#dv1 .u_phone").focusout(function (){
                //获取手机号参数
                var u_phone = $("#dv1 .u_phone").val();
                //去空格
                u_phone = $.trim(u_phone);
                //构建正则表达式
                var u_phonePatt = /^1[3-9][0-9]{9}$/
                if(u_phone == null || u_phone == ""){
                    $("#phoneErrorMsg").text("手机号为空不能")
                }else if(!u_phonePatt.test(u_phone)){
                    $("#phoneErrorMsg").text("手机号格式错误!")
                }
            });

            //验证码不为空的提示
            $("#code").focusout(function (){
                var code = $("#code").val();
                code = $.trim(code);
                if(code == null || code == ""){
                    $("#codeErrorMsg").text("验证码不能为空!");
                }
            });

            //验证码点击刷新
            $("#code_img").click(function () {
                this.src = "http://localhost:8080/kaptcha.jpg";
            })

            //获取焦点提示语消失
            $(".v > input[type=text]").focus(function (){
                $(".hint").text("");
            });

            //点击办卡,查询用户信息回显到页面
            $(".b1").click(function (){
                $.ajax({
                    url: "/userServlet",
                    type: "post",
                    data: {action: "findUserByU_id",userid:$("#userid").text()},
                    dataType: "json",
                    success:function (d){
                        if(d.code == 1){
                            //回显用户姓名和身份证号
                            $("#dv1 .u_name").val(d.data.u_name);
                            $("#dv1 .u_idcard").val(d.data.u_idcard);
                            $("#dv1 .u_phone").val(d.data.u_phone);
                            $("#c_account").html("");
                            $("#c_account").append("<option value=\"-1\">----请选择开户行----</option>");
                            $("#c_account").append("<option value=\"1\">中国银行</option>");
                            $("#c_account").append("<option value=\"2\">中国邮政</option>");
                            $("#c_account").append("<option value=\"3\">中国农业银行</option>");
                            $("#c_account").append("<option value=\"4\">中国工商银行</option>");
                            $("#c_account").append("<option value=\"5\">中国建设银行</option>");
                            $("#applyForCard").show();
                        }else {
                            alert("请求错误！");
                        }
                    }
                })
            });

            //开户提交
            $("#apl_btn").click(function (){
                var code = $("#code").val();
                code = $.trim(code);
                if (code == null || code == "") {
                    $(".codeErrorMsg").text("验证码不能为空!");
                    return;
                }
                //获取用户id
                var u_id=$("#userid").text();
                var u_name = $("#dv1 .u_name").val();
                var u_idcard = $("#dv1 .u_idcard").val();
                var u_phone = $("#dv1 .u_phone").val();
                var c_account = $("#c_account").val();
                var code = $("#code").val();
                $.ajax({
                    //提交判断
                    url: "/cardServlet",
                    type: "post",
                    data: {action: "applyCreditCard",
                        u_id:u_id,
                        /*u_name:u_name,
                        u_idcard:u_idcard,*/
                        u_phone:u_phone,
                        c_account:c_account,
                        code:code},
                    dataType: "json",
                    success: function (d){
                        if(d.code == 1){
                            alert(d.msg);
                            c();
                        }else if(d.code == -1){
                            $("#codeErrorMsg").text(d.msg);
                        }else if(d.code == -2){
                            $("#apy_card").text(d.msg);
                        }else {
                            alert("申请失败，请重新申请");
                        }
                    }
                });
                //
            });
            //点击开户取消关闭界面
            $(".v .cancel").click(function (){
                $(".d").hide();
                c();
            });

            //进入还款界面
            $(".b2").click(function (){
                //查询用户姓名，以及用户是否有信用卡
                var u_id=$("#userid").text();
                $.ajax({
                    url: "/UserCardServlet",
                    type: "post",
                    data: {action: "findCreditCardByU_id",userid:u_id},
                    dataType:"json",
                    success: function (d){
                        if(d.code == 1){
                            //存在可用信用卡
                            //将用户姓名渲染上去
                            $("#dv2 .u_name").val(d.data[0].u_name);
                            //关闭后清空下拉列表
                            $("#r_card").html("");
                            $("#r_card").append("<option value=\"-1\">----请选择取还款信用卡----</option>")
                            //将所有的信用卡渲染到选择栏中
                            for(var i = 0;i < d.data.length;i++){
                                var a = d.data[i].c_id;
                                //获取银行卡后四位
                                var b = a.substring(a.length - 4);
                                //选择后获取的是银行卡的卡号
                                $("#r_card").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                            }
                            //显示界面
                            $("#repayment").show();
                        }else {
                            alert("您还没有信用卡!")
                        }
                    }
                });
                //查询用户是否具有储蓄卡
                $.ajax({
                    url: "/cardServlet",
                    type: "post",
                    data: {action: "findDepositCard",userid:u_id},
                    dataType:"json",
                    success: function (d) {
                        if (d.code == 1) {
                            //存在可用储蓄卡信用卡
                            //将所有的信用卡渲染到选择栏中
                            //点击取消清空下拉列表
                            $("#out_card").html("");
                            $("#out_card").append("<option value=\"-1\">----请选择转出账户----</option>");
                            $("#out_card").append("<option value=\"1\">账户余额</option>");
                            for (var i = 0; i < d.data.length; i++) {
                                var a = d.data[i].c_id;
                                //获取银行卡后四位
                                var b = a.substring(a.length - 4);
                                //选择后获取的是银行卡的卡号
                                $("#out_card").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                            }
                        }
                    }

                });

            });
            //还款提交
            $("#rep_btn").click(function (){
                //获取还款金额
                var amount = $(".p_price").val();
                //获取还款信用卡信息
                var rep_creditCard = $("#r_card").val();
                //获取转出账户信息
                var out_card = $("#out_card").val();
                //输入框弹窗，获取到支付密码
                var p=prompt("请输入支付密码","");
                if(p!=""&&p!=null){
                    pwd=p;
                }
                if(amount == null || amount == "" || amount <= 0){

                    $("#r_amount").text("还款金额不能为空,且必须大于0")
                    return;
                }else if(rep_creditCard == -1){
                    alert("未选择还款信用卡!")
                }else if(out_card == -1){
                    alert("未选择转出账户!")
                }else {
                    //后台判断
                    $.ajax({
                        url: "/cardServlet",
                        type: "post",
                        data: {action: "creditCardRepayment",userid:$("#userid").text(),
                            rep_creditCard:rep_creditCard,
                            out_card:out_card,
                            amount:amount,
                            pwd: pwd},
                        dataType:"json",
                        success: function (d){
                            if(d.code == 1){
                                alert(d.msg);
                                c();
                            }else {
                                alert(d.msg);
                            }
                        }
                    })
                }
            });
            //进入转出界面，没有信用卡不进入
            $(".b3").click(function (){
                //查询用户是否有信用卡
                var u_id=$("#userid").text();
                $.ajax({
                    url: "/UserCardServlet",
                    type: "post",
                    data: {action: "findCreditCardByU_id",userid:u_id},
                    dataType:"json",
                    success: function (d){
                        if(d.code == 1){
                            //存在可用信用卡
                            //将用户姓名渲染上去
                            $("#dv3 .u_name").val(d.data[0].u_name);
                            //关闭后清空下拉列表
                            $("#card").html("");
                            $("#card").append("<option value=\"-1\">----请选择取卡卡号----</option>");
                            //将所有的信用卡渲染到选择栏中
                            for(var i = 0;i < d.data.length;i++){
                                var a = d.data[i].c_id;
                                //获取银行卡后四位
                                var b = a.substring(a.length - 4);
                                //选择后获取的是银行卡的卡号
                                $("#card").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                            }
                            $("#enchashment").show();
                        }else {
                            alert(d.msg);
                        }
                    }
                });
                //查询用户是否有主卡
                $.ajax({
                    url: "/cardServlet",
                    type: "post",
                    data: {action: "findHostCard",userid:u_id},
                    dataType:"json",
                    success: function (d){
                        if(d.code == 1){
                            //存在可用主卡
                            //关闭后清空下拉列表
                            $("#en_card").html("");
                            $("#en_card").append("<option value=\"-1\">----请选择转入账户----</option>")
                            $("#en_card").append("<option value=\"1\">转入账户余额</option>")
                            //将所有的信用卡渲染到选择栏中
                            for(var i = 0;i < d.data.length;i++){
                                var a = d.data[i].c_id;
                                //获取银行卡后四位
                                var b = a.substring(a.length - 4);
                                //选择后获取的是银行卡的卡号
                                $("#en_card").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>");
                            }
                        }
                    }
                })
            });

            //转出金额的失去焦点事件
            $("#en_out").focusout(function (){
                //获取转出金额
                var money = $("#en_out").val();
                //去除空格
                money = $.trim(money);
                var  amountPatt= /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                if(money == null || money == ""){
                    $("#en_sp").text("转出金额不能为空!");
                }else if(!amountPatt.test(money)){
                    $("#en_sp").text("输入金额格式有误!");
                }else {
                    //定义手续费
                    var serviceCharge = parseFloat(money) * 0.001;
                    $("#en_price").val(serviceCharge)
                }

            });

                //确定转出的点击事件
            $("#eht_btn").click(function (){
                var u_id=$("#userid").text();
                //信用卡
                var creditCard = $("#card").val();
                //转出账户
                var c_id = $("#en_card").val();
                //转出金额
                var money = $("#en_out").val();
                //去除空格
                money = $.trim(money);
                var  amountPatt= /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
                //手续费
                var serviceCharge = $("#en_price").val();
                var pwd="";
                if(money == null || money == ""){
                    $("#en_sp").text("转出金额不能为空!");
                    return;
                }else if(!amountPatt.test(money)){
                    $("#en_sp").text("输入金额格式有误!");
                    return;
                }else if(creditCard == -1 || c_id == -1){
                    alert("未选择转出信用卡或转入账户!")
                    return;
                }else{
                    //输入框弹窗，获取到支付密码
                    var p = prompt("请输入支付密码","");
                    if (p =="" && p != null) {
                        alert("密码不能为空！")
                        return;
                    }else {
                        pwd = p;
                        $.ajax({
                            url: "/cardServlet",
                            type: "post",
                            data: {action: "creditCardOut",
                                u_id:u_id,
                                out_card:creditCard,
                                in_card:c_id,
                                money:money,
                                serviceCharge:serviceCharge,
                                pwd: pwd },
                            dataType:"json",
                            success: function (d){
                                if(d.code == 1){
                                    alert(d.msg);
                                    c();
                                }else {
                                    alert(d.msg);
                                }
                            }
                        })
                    }
                }
            });

            //进度查询
            $(".b4").click(function (){
                alert("11");
                var u_id=$("#userid").text();
                $.ajax({
                    url: "/cardServlet",
                    type: "post",
                    data: {action: "findSchedule",u_id:u_id},
                    dataType:"json",
                    success: function (d){
                        if(d.code == -1){
                            alert(d.msg);
                        }else if(d.code == 1){
                            $("#h").text(d.msg);
                            $("#schedule").show();
                        }else {
                            $("#h").text(d.msg);
                            $("#schedule").show();
                        }
                    }
                })

            });
            //进入额度查询界面
            $(".b5").click(function (){
                var u_id=$("#userid").text();
                //var u_id=3;
                $.ajax({
                    url: "/UserCardServlet",
                    type: "post",
                    data: {action: "findCreditCardByU_id", userid:u_id},
                    dataType: "json",
                    success: function (d) {
                        if (d.code == 1) {
                            //存在可用信用卡
                            //点击取消清空下拉列表
                            $("#inquire").html("");
                            $("#inquire").append("<option value=\"-1\">----请选择信用卡----</option>");
                            //将所有的信用卡渲染到选择栏中
                            for (var i = 0; i < d.data.length; i++) {
                                var a = d.data[i].c_id;
                                //获取银行卡后四位
                                var b = a.substring(a.length - 4);
                                //选择后获取的是银行卡的卡号
                                $("#inquire").append(" <option value='" + d.data[i].c_id + "'>" + d.data[i].c_account + "(" + b + ")</option>")
                            }
                            //显示界面
                            $("#quota").show();
                        } else {
                            alert("您还没有信用卡!")
                        }
                    }
                })
            });
            //点击查询，根据信用卡号查询信用卡额度
            $("#search").click(function (){

                var c_id = $("#inquire").val();
                if(c_id=="-1"){
                    alert("请选择要查询的信用卡");
                    return;
                }
                $.ajax({
                    url:"/cardServlet",
                    type: "post",
                    data: {action: "findCreditCard", c_id:c_id},
                    dataType: "json",
                    success: function (d){
                        if(d.code == 1){
                            if(d.data.c_quota==null){
                                $("#iq_quota").text("0.0");
                            }else {
                                $("#iq_quota").text(d.data.c_quota);
                            }

                        }else {
                            alert(d.msg)
                        }
                    }
                })
            });
        });

        //点击取消，关闭遮罩，清空数据
        $(".cancel").click(function (){
            c();
        });

        //清空文本内容 关闭遮罩
        function c(){
            $(".v > input[type=text]").val("");
            $(".v .hint").text("");
            $("#iq_quota").text("");
            $(".d").hide();
        }
    </script>
</head>
<body>
<!--主体部分-->
<div id="d1">
    <h1 class="h1">信用卡</h1>
    <div class="d1">
        <div class="prod">
            <h2>办卡</h2><br>
            <input type="button" class="b1" value="办卡">
        </div>
        <div class="prod">
            <h2>还款</h2><br>
            <input type="button" class="b2" value="还款">
        </div>
        <div class="prod">
            <h2>转出</h2><br>
            <input type="button" class="b3" value="转出">
        </div>
        <div class="prod">
            <h2>进度查询</h2><br>
            <input type="button" class="b4" value="进度查询">
        </div>
        <div class="prod">
            <h2>额度查询</h2><br>
            <input type="button" class="b5" value="额度查询">
        </div>
    </div>
</div>
<!--修改时，弹出层 ，弹出遮罩层，和内容-->
<!--申请信用卡-->
<div id="applyForCard" class="d">
    <div id="dv1" class="v">
        <h1 style="margin-top: 50px">申请信用卡</h1>
        <span>姓&emsp;&emsp;名：</span><input type="text" class="u_name" placeholder="请输入用户姓名" disabled><br>
        <span>身份证号：</span><input type="text" class="u_idcard" placeholder="请输入身份证号" disabled><br>
        <span>手&ensp;机&ensp;号：</span><input type="text" class="u_phone" placeholder="请输入手机号"><br>
        <span id="phoneErrorMsg" class="hint"></span><br>
        <span>开&ensp;户&ensp;行：</span>
        <select name="interest" id="c_account" class="cardSelect">
            <option value="-1">----请选择开户行----</option>
            <option value="1">中国银行</option>
            <option value="2">中国邮政</option>
            <option value="3">中国农业银行</option>
            <option value="4">中国工商银行</option>
            <option value="5">中国建设银行</option>
        </select><br>
        <span id="apy_card" class="hint"></span><br>
        <span>验&ensp;证&ensp;码：</span>
        <input class="txt" type="text" name="code" style="width: 140px;height: 40px" id="code"
               placeholder="请输入验证码"/>
        <img id="code_img" alt="" src="http://localhost:8080/kaptcha.jpg"
             style="position: relative;left: 3px; top: 15px; width: 90px;height: 40px;">
        <br>
        <span id="codeErrorMsg" class="hint"></span>
        <br>
        <input type="button" id="apl_btn" value="提交">
        <input type="button" class="cancel" value="取消">
    </div>
</div>
<!--信用卡还款-->
<div id="repayment" class="d">
    <div id="dv2" class="v">
        <h1 style="margin-top: 50px">信用卡还款</h1>
        <span>姓&emsp;&emsp;名：</span><input type="text" class="u_name" placeholder="请输入持卡人姓名" disabled><br>
        <span>选取信用卡：</span>
        <!--<input type="text" class="c_id" placeholder="请输入信用卡号" disabled><br>-->
        <select name="interest" id="r_card" class="cardSelect">
            <option value="-1">----请选择取还款信用卡----</option>
        </select><br>
        <span>选取转出账户：</span>
        <select name="interest" id="out_card" class="cardSelect">
            <option value="-1">----请选择转出账户----</option>
            <option value="1">账户余额</option>
        </select><br>
        <span id="rep_sp"></span>
        <span>还款金额：</span><input type="text" class="p_price" placeholder="请输入还款金额(元)"><br>
        <span id="r_amount" class="hint"></span>
        <br>
        <input type="button" id="rep_btn" value="确定还款">
        <input type="button" class="cancel" value="取消">
    </div>
</div>
<!--信用卡取现-->
<div id="enchashment" class="d">
    <div id="dv3" class="v">
        <h1 style="margin-top: 50px">信用卡取现</h1>
        <span>选取取卡卡号：</span>
        <select name="interest" id="card" class="cardSelect">
            <option value="-1">----请选择取卡卡号----</option>
        </select><br>
        <h2>转入账户</h2>
        <span>收&ensp;款&ensp;方：</span><input type="text" class="u_name" placeholder="请输入收款方姓名" disabled><br>
        <span>选择收款账户：</span>
        <select name="interest" id="en_card" class="cardSelect">
            <option value="-1">----请选择转入账户----</option>
            <option value="1">----转入账户余额----</option>
        </select><br>
        <span>转出金额：</span><input type="text" class="p_price" placeholder="0.00元" id="en_out"><br>
        <span id="en_sp" class="hint"></span><br>
        <span>总手续费：</span><input type="text" class="p_price" placeholder="总手续费(元)" id="en_price" disabled><br>
        <input type="button" id="eht_btn" value="确定转出">
        <input type="button" class="cancel" value="取消">
    </div>
</div>
<!--进度查询-->
<div id="schedule" class="d">
    <div id="dv4" class="v">
        <h1 style="margin-top: 50px">信用卡申请进度查询</h1><br><br><br><br><br>
        <h2 id="h"></h2><br><br><br><br><br>
        <input type="button" class="cancel" value="退出" style="width: 200px;height: 40px">
    </div>
</div>
<!--额度查询-->
<div id="quota" class="d">
    <div id="dv5" class="v">
        <h1 style="margin-top: 50px">信用卡额度查询</h1>
        <br><br>
        <span>请选取要查询的信用卡：</span>
        <select name="interest" id="inquire" class="cardSelect">
            <option value="-1">----请选择信用卡----</option>
        </select><br><br><br>
        <h2>您的信用卡额度为:</h2>
        <span id="iq_quota"></span>
        <br>
        <br>
        <br>
        <input type="button" id="search" value="查询">
        <input type="button" class="cancel" value="退出">
    </div>
</div>
</body>
</html>